use dioxus::prelude::*;

#[derive(PartialEq, Clone)]
pub enum AlertType {
    Error,
    Success,
    Warning,
    Info,
}

#[derive(PartialEq, Clone, Props)]
pub struct AlertProps {
    #[props(into)]
    pub message: String,
    pub show: bool,
    pub alert_type: AlertType,
    pub on_close: EventHandler<()>,
}

#[component]
pub fn Alert(props: AlertProps) -> Element {
    if !props.show {
        return rsx!{};
    }

    rsx! {
        div {
            class: {match props.alert_type {
    AlertType::Error => "fixed bottom-4 right-4 z-50 flex items-center p-4 mb-4 text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400",
    AlertType::Success => "fixed bottom-4 right-4 z-50 flex items-center p-4 mb-4 text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400",
    AlertType::Warning => "fixed bottom-4 right-4 z-50 flex items-center p-4 mb-4 text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-400",
    AlertType::Info => "fixed bottom-4 right-4 z-50 flex items-center p-4 mb-4 text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400",
}},
            role: "alert",
            div {
                class: "ml-3 text-sm font-medium",
                {props.message}
            }
            button {
                class: {match props.alert_type {
                    AlertType::Error => "ml-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700",
                    AlertType::Success => "ml-auto -mx-1.5 -my-1.5 bg-green-50 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700",
                    AlertType::Warning => "ml-auto -mx-1.5 -my-1.5 bg-yellow-50 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-yellow-400 dark:hover:bg-gray-700",
                    AlertType::Info => "ml-auto -mx-1.5 -my-1.5 bg-blue-50 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700",
                }},
                "type": "button",
                onclick: move |_| props.on_close.call(()),
                span {
                    class: "sr-only",
                    "Close"
                }
                svg {
                    class: "w-3 h-3",
                    "aria_hidden": "true",
                    xmlns: "http://www.w3.org/2000/svg",
                    fill: "none",
                    view_box: "0 0 14 14",
                    path {
                        stroke: "currentColor",
                        stroke_linecap: "round",
                        stroke_linejoin: "round",
                        stroke_width: "2",
                        d: "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
                    }
                }
            }
        }
    }
}